
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css">
    <script src="./layui-v2.6.8/layui/layui.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">餐厅点餐系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-hide-xs"><a href="http://localhost:8080/login/productServlet" target="_blank">
                 <img src="imgs/logo.png" alt="图片飞了"width="150px";height="200px">
             </a></li>

            </li>
        </ul>



        <ul class="layui-nav layui-layout-right">

            <li class="layui-nav-item layui-hide-xs">
                <i class="layui-icon layui-icon-time" style="font-size: 18px; color: #1E9FFF;"></i>&nbsp;<span id="times"></span>
            </li>

            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="upload/${us.zp}" class="layui-nav-img">
                    个人中心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">账号：${us.username}</a></dd>
                    <dd><a href="">姓名：${us.NAME}</a></dd>
                </dl>
            </li>

            <li class="layui-nav-item layui-hide-xs "><a href="logoutServlet">
                <i class="layui-icon layui-icon-logout" style="font-size: 18px; color: #1E9FFF;"></i>安全退出
            </a></li>

            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">

        <div class="layui-side-scroll">
            <div style="text-align: center;padding-bottom: 10px;padding-top: 10px">
                <a href="javascript:;"style="text-align: center" id="txpic" data-method="offset" data-type="auto">
                    <img src="upload/${us.zp}" class="layui-nav-img"style="width:110px;height:110px " >
                    <p style="color: #fff9ec">欢迎光临:${us.NAME}</p>
                </a>
            </div>
            <hr>
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <%
                if (session.getAttribute("type").toString().equals("1")) {
            %>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;"><i class="layui-icon layui-icon-user" style="font-size: 18px; color: #1E9FFF;"></i>&nbsp;餐厅经理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;"
                               data-url="brand.html"
                               data-id="brand"
                               data-title="<i class='layui-icon layui-icon-form'
                                style='font-size:18px; color:#009688;'></i>&nbsp;&nbsp;食谱"
                               class="site-demo-active"
                               data-type="tabAdd"
                        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-form" style="font-size: 18px; color: #1E9FFF;"></i>&nbsp;食谱</a></dd><!--菜品-->

                        <dd><a href="javascript:;"
                               data-url="menu.jsp"
                               data-id="menu"
                               data-title="<i class='layui-icon layui-icon-table'
                                style='font-size:18px; color:#009688;'></i>&nbsp;&nbsp;菜单"
                               class="site-demo-active"
                               data-type="tabAdd"
                        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-table" style="font-size: 18px; color: #1E9FFF;"></i>&nbsp;菜单</a></dd><!--个人订单-->

                        <dd><a href="javascript:;"
                               data-url="blanketOrderServlet"
                               data-id="grxk"
                               data-title="<i class='layui-icon layui-icon-form'
                                style='font-size:18px; color:#009688;'></i>&nbsp;&nbsp;总括订单"
                               class="site-demo-active"
                               data-type="tabAdd"
                        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-form" style="font-size: 18px; color: #1E9FFF;"></i>&nbsp;总括订单</a></dd>


                        <dd><a href="javascript:;"
                               data-url="order.jsp"
                               data-id="sykc"
                               data-title="<i class='layui-icon layui-icon-form'
                                style='font-size:18px; color:#009688;'></i>&nbsp;&nbsp;总订单"
                               class="site-demo-active"
                               data-type="tabAdd"
                        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-form" style="font-size: 18px; color: #1E9FFF;"></i>&nbsp;总订单</a></dd><!--主食-->

                        <dd><a href="javascript:;"
                               data-url="yuedu.jsp"
                               data-id="yuedu"
                               data-title="<i class='layui-icon layui-icon-table'
                                style='font-size:18px; color:#009688;'></i>&nbsp;&nbsp;用户月度总结"
                               class="site-demo-active"
                               data-type="tabAdd"
                        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-table" style="font-size: 18px; color: #1E9FFF;"></i>&nbsp;用户月度总结</a></dd><!--个人订单-->
                    </dl>
                </li>
                <%
                    }
                %>
                <%
                    if (session.getAttribute("type").toString().equals("2")) {
                %>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;"><i class="layui-icon layui-icon-user" style="font-size: 18px; color: #1E9FFF;"></i>&nbsp;餐厅主管</a>
                    <dl class="layui-nav-child">
                <dd><a href="javascript:;"
                       data-url="brand.html"
                       data-id="brand"
                       data-title="<i class='layui-icon layui-icon-form'
                                style='font-size:18px; color:#009688;'></i>&nbsp;&nbsp;食谱"
                       class="site-demo-active"
                       data-type="tabAdd"
                >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-form" style="font-size: 18px; color: #1E9FFF;"></i>&nbsp;食谱</a></dd><!--菜品-->
                <dd><a href="javascript:;"
                       data-url="blanketOrderServlet"
                       data-id="grxk"
                       data-title="<i class='layui-icon layui-icon-form'
                                style='font-size:18px; color:#009688;'></i>&nbsp;&nbsp;总括订单"
                       class="site-demo-active"
                       data-type="tabAdd"
                >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-form" style="font-size: 18px; color: #1E9FFF;"></i>&nbsp;总括订单</a></dd>
                    </dl>
                </li>
                <%
                    }
                %>
                <%
                    if (session.getAttribute("type").toString().equals("3")) {
                %>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;"><i class="layui-icon layui-icon-user" style="font-size: 18px; color: #1E9FFF;"></i>&nbsp;财务管理</a>
                    <dl class="layui-nav-child">
                <dd><a href="javascript:;"
                       data-url="yuedu.jsp"
                       data-id="yuedu"
                       data-title="<i class='layui-icon layui-icon-table'
                                style='font-size:18px; color:#009688;'></i>&nbsp;&nbsp;用户月度总结"
                       class="site-demo-active"
                       data-type="tabAdd"
                >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-table" style="font-size: 18px; color: #1E9FFF;"></i>&nbsp;用户月度总结</a></dd><!--个人订单-->
                    </dl>
                </li>
                <%
                    }
                %>
                <%
                    if (session.getAttribute("type").toString().equals("4")) {
                %>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;"><i class="layui-icon layui-icon-user" style="font-size: 18px; color: #1E9FFF;"></i>&nbsp;配餐员</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;"
                               data-url="order.jsp"
                               data-id="sykc"
                               data-title="<i class='layui-icon layui-icon-form'
                                style='font-size:18px; color:#009688;'></i>&nbsp;&nbsp;总订单"
                               class="site-demo-active"
                               data-type="tabAdd"
                        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-form" style="font-size: 18px; color: #1E9FFF;"></i>&nbsp;总订单</a></dd><!--主食-->
                    </dl>
                </li>
                <%
                    }
                %>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">

            <div style="padding: 20px; background-color: #F2F2F2;">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md10">
                        <div class="layui-card">

                            <div class="layui-card-body">
                                <div class="layui-tab layui-tab-card layui-tab-brief" lay-filter="demo" lay-allowClose="true"style="width: 100%">
                                    <ul class="layui-tab-title">
                                        <li class="layui-this"><i class="layui-icon layui-icon-home" style="font-size: 18px; color: #1E9FFF;font-weight: bold"></i>&nbsp;餐厅页面</li>
                                    </ul>
                                    <div class="layui-tab-content">
                                        <div class="layui-tab-item layui-show" style="height: 675px;" >
                                            <iframe src="welcome.jsp" width="100%" height="500px"></iframe>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

    <div class="layui-footer" style="text-align: center;color: #0074BB">
        <!-- 底部固定区域 -->
        &copy;味极鲜餐厅&nbsp;&nbsp;上次登录时间：${lasttimesession}
    </div>
</div>
<%--<script src="./layui-v2.6.8/layui/layui.js"></script>--%>
<script>
    //JS
    layui.use(['element', 'layer', 'util','jquery'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //时钟定时器
        setInterval(function () {
            let dateStr="";
            let date = new Date();
            //要单独获得时间
            dateStr +=date.getFullYear()+"年";//年
            dateStr +=( (date.getMonth()+1)<10?  "0"+(date.getMonth()+1):  (date.getMonth()+1) )+"月";//月
            dateStr +=(date.getDate()<10?  "0"+date.getDate():  date.getDate())+"日";
            dateStr +=(date.getHours()<10?  "0"+date.getHours()  :date.getHours())+"时";
            dateStr +=(date.getMinutes()<10?  "0"+date.getMinutes():  date.getMinutes())+"分";
            dateStr +=(date.getSeconds()<10?  "0"+date.getSeconds():  date.getSeconds())+"秒";
            let xq =["日","一","二","三","四","五","六"]
            dateStr +="星期"+xq[date.getDay()];

            $("#times").text(dateStr);
        },1000);

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 1});
            }
            ,menuRight: function(){
                layer.open({
                    title:'学校简介'
                    ,type: 1
                    ,content: '<div style="padding: 3px;"><iframe src="学校简介.jsp" width="260px" height="100%"></iframe></div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });

        //触发事件
        var active = {
            //在这里给active绑定几项事件，后面可通过active调用这些事件
            tabAdd: function (url, id, title) {
                //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                element.tabAdd('demo', {
                    title: title,
                    content: '<iframe data-frameid="' + id
                        + '" scrolling="auto" frameborder="0" src="'
                        + url + '" style="width:100%;height: 730px"></iframe>',
                    id: id
                    //规定好的id
                })
                element.render('tab');

            },
            tabChange: function (id) {
                //切换到指定Tab项
                element.tabChange('demo', id); //根据传入的id传入到指定的tab项
            },
            tabDelete: function (id) {
                element.tabDelete("demo", id);//删除
            },
            tabDeleteAll: function (ids) {//删除所有
                $.each(ids, function (i, item) {
                    element.tabDelete("demo", item); //ids是一个数组，里面存放了多个id，调用tabDelete方法分别删除
                })
            },
            offset: function(othis){
                var type = othis.data('type')
                    ,text = othis.text();

                layer.open({
                    type: 1,
                    title:'修改个人头像'
                    ,offset: type //具体配置参考：/docs/modules/layer.html#offset
                    ,id: 'layerDemo'+type //防止重复弹出
                    ,content: '<div style="padding: 20px 20px;width: 400px;height: 260px"><iframe src="updateTouX.jsp" width="360px" height="260px"></iframe> </div>'
                    ,btn: '确定'
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0 //不显示遮罩
                    ,yes: function(){
                        //刷新
                        location.reload();
                        layer.closeAll();
                    }
                });
            }
        };
        $('#txpic').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

        //当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
        $('.site-demo-active').on(
            'click',
            function () {
                var dataid = $(this);

                //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
                if ($(".layui-tab-title li[lay-id]").length <= 0) {
                    //如果比零小，则直接打开新的tab项
                    active
                        .tabAdd(dataid.attr("data-url"), dataid
                            .attr("data-id"), dataid
                            .attr("data-title"));
                } else {
                    //否则判断该tab项是否以及存在

                    var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                    $.each($(".layui-tab-title li[lay-id]"),
                        function () {
                            //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                            if ($(this).attr("lay-id") == dataid
                                .attr("data-id")) {
                                isData = true;
                            }
                        })
                    if (isData == false) {
                        //标志为false 新增一个tab项
                        active.tabAdd(dataid.attr("data-url"), dataid
                            .attr("data-id"), dataid
                            .attr("data-title"));
                    }
                }
                //最后不管是否新增tab，最后都转到要打开的选项页面上
                active.tabChange(dataid.attr("data-id"));
            });

    });
</script>


<%--                    <ul class="layui-nav layui-nav-tree" lay-filter="test">--%>
<%--                        <li class="layui-nav-item layui-nav-itemed">--%>
<%--                            <a class="" href="javascript:;"><i class="layui-icon layui-icon-form" style="font-size: 18px; color: #1E9FFF;"></i>&nbsp;后勤部</a>--%>
<%--                            <dl class="layui-nav-child">--%>
<%--                                <dd><a href="javascript:;"--%>
<%--                                       data-url="grxx.jsp"--%>
<%--                                       data-id="grxx"--%>
<%--                                       data-title="<i class='layui-icon layui-icon-user'--%>
<%--                                style='font-size:18px; color:#009688;'></i>&nbsp;&nbsp;经理"--%>
<%--                                       class="site-demo-active"--%>
<%--                                       data-type="tabAdd"--%>
<%--                                >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-user" style="font-size: 18px; color: #1E9FFF;"></i>&nbsp;经理</a></dd>--%>
<%--                                <dd><a href="javascript:;"--%>
<%--                                       data-url="grxx.jsp"--%>
<%--                                       data-id="grxx"--%>
<%--                                       data-title="<i class='layui-icon layui-icon-user'--%>
<%--                                style='font-size:18px; color:#009688;'></i>&nbsp;&nbsp;厨房主管"--%>
<%--                                       class="site-demo-active"--%>
<%--                                       data-type="tabAdd"--%>
<%--                                >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-user" style="font-size: 18px; color: #1E9FFF;"></i>&nbsp;厨房主管</a></dd><!--厨房主管-->--%>
<%--                                <dd><a href="javascript:;"--%>
<%--                                       data-url="order.jsp"--%>
<%--                                       data-id="order"--%>
<%--                                       data-title="<i class='layui-icon layui-icon-user'--%>
<%--                                style='font-size:18px; color:#009688;'></i>&nbsp;&nbsp;配餐员"--%>
<%--                                       class="site-demo-active"--%>
<%--                                       data-type="tabAdd"--%>
<%--                                >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-user" style="font-size: 18px; color: #1E9FFF;"></i>&nbsp;配餐员</a></dd><!--配餐员-->--%>

<%--                            </dl>--%>
<%--                        </li>--%>
<%--                        </dl>--%>
<%--                        </li>--%>

<%--                    </ul>--%>
</body>
</html>